<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程预览</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/view-course.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB07B',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
            }
            /* 模态框样式优化 */
            .modal {
                display: none;
                position: fixed;
                z-index: 1000;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.6); /* 加深背景颜色 */
                backdrop-filter: blur(3px); /* 添加模糊效果 */
            }

            .modal-content {
                background-color: #ffffff;
                margin: 10% auto; /* 调整模态框的垂直位置 */
                padding: 30px; /* 增加内边距 */
                border: none; /* 移除边框 */
                width: 90%;
                max-width: 700px; /* 增加最大宽度 */
                border-radius: 12px; /* 增加圆角 */
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 增加阴影 */
                background: linear-gradient(135deg, rgba(219, 234, 254, 0.95), rgba(224, 231, 255, 0.95));
                border: 1px solid rgba(99, 102, 241, 0.2);
            }

            .close {
                color: #999;
                float: right;
                font-size: 32px; /* 增大关闭按钮字体大小 */
                font-weight: bold;
                transition: color 0.3s ease; /* 添加过渡效果 */
            }

            .close:hover,
            .close:focus {
                color: #333;
                text-decoration: none;
                cursor: pointer;
            }

            .modal-content h2 {
                font-size: 24px; /* 增大标题字体大小 */
                color: #1D2129;
                margin-bottom: 20px; /* 增加标题底部间距 */
            }

            .modal-content label {
                font-size: 16px;
                color: #555;
                margin-bottom: 8px; /* 增加标签底部间距 */
            }

            .modal-content input[type="text"],
            .modal-content textarea,
            .modal-content select {
                border: 1px solid #ccc;
                border-radius: 6px; /* 增加输入框圆角 */
                padding: 12px; /* 增加输入框内边距 */
                font-size: 16px;
                transition: border-color 0.3s ease; /* 添加过渡效果 */
            }

            .modal-content input[type="text"]:focus,
            .modal-content textarea:focus,
            .modal-content select:focus {
                border-color: #165DFF; /* 聚焦时改变边框颜色 */
                outline: none;
            }

            .modal-content button {
                padding: 12px 20px; /* 增加按钮内边距 */
                font-size: 16px;
            }
        }
        body {
            background-image: url('/images/background.jpg'); /* 假设图片放在public/images目录下 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            z-index: -1;  /* 确保低于内容层级 */
        }

            body::before {
                display:none;
            }
            #chapterList {
    padding: 0;
    margin: 0;
}

#chapterList .course-box {
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

#chapterList .course-box:last-child {
    border-bottom: none;
}

#chapterList .course-box h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: #2c3e50;
}

#chapterList .course-box p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}
.course-box {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.course-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 添加下拉菜单样式 */
#user-dropdown{
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    #user-dropdown a:hover{
        background-color: #f9fafb;
    }
    </style>
</head>

<body class="bg-neutral font-inter text-dark">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">课程预览</h1>
            </div>
            <!-- 添加搜索框 -->
        <div class="relative mx-4 flex-1 max-w-md">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i class="fas fa-search text-gray-400"></i>
            </div>
            <input 
                type="text" 
                id="courseSearch" 
                class="w-full pl-10 pr-4 py-2 rounded-lg bg-white text-dark placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300"
                placeholder="按课程编号搜索..."
                oninput="filterCourses()"
            >
        </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <!-- 修改开始：添加用户信息容器 -->
                <div id="user-info-container" class="hidden text-right mr-2">
                    <div id="user-name" class="font-medium text-white"></div>
                    <div id="student-id" class="text-xs text-white/80"></div>
                </div>
                <!-- 头像区域（添加下拉菜单） -->
                <div class="relative">
                    <a href="#" id="user-avatar" class="text-white hover:text-neutral-200 transition-colors duration-300">
                        <i class="fa-solid fa-user-circle text-xl"></i>
                    </a>
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
                        <a href="#" onclick="editProfile()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user-edit mr-2"></i>编辑个人资料
                        </a>
                        <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div class="content-header">
        <!-- 其他标题内容 -->
    </div>
    <div id="allCourses" class="content">
        <div id="courseList"></div>
    </div>

    <!-- 新增章节模态框 -->
    <div id="addChapterModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAddChapterModal()">&times;</span>
            <h2>新增章节</h2>
            <div class="form-group">
                <label for="chapterPosition">章节位置:</label>
                <select id="chapterPosition" class="form-control">
                    <!-- 选项将通过JS动态填充 -->
                </select>
            </div>
            <label for="chapterTitle" class="block mb-1">章节标题：</label>
            <input type="text" id="chapterTitle" placeholder="不能为空" class="w-full border border-gray-300 rounded-md p-2 mb-3">
            <label for="chapterContent" class="block mb-1">章节内容：</label>
            <textarea id="chapterContent" placeholder="不能为空" class="w-full border border-gray-300 rounded-md p-2 mb-3"></textarea>
            <input type="hidden" id="courseCodeForChapter">
            <button onclick="addNewChapter()" class="px-4 py-2 bg-primary text-white rounded-md btn-hover">新增章节</button>
            <button onclick="closeAddChapterModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover ml-2">返回</button>
        </div>
    </div>

    <!-- 删除章节模态框 -->
    <div id="deleteChapterModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeDeleteChapterModal()">&times;</span>
            <h2>删除章节</h2>
            <label for="deleteChapterSelect" class="block mb-1">选择要删除的章节：</label>
            <select id="deleteChapterSelect" class="w-full border border-gray-300 rounded-md p-2 mb-3"></select>
            <button onclick="deleteChapter()" class="px-4 py-2 bg-red-500 text-white rounded-md btn-hover">删除</button>
            <button onclick="closeDeleteChapterModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover ml-2">取消</button>
        </div>
    </div>

    <!-- 查看章节模态框 -->
    <div id="viewChaptersModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeViewChaptersModal()">&times;</span>
            <h2>课程章节</h2>
            <div id="chapterList"></div>
            <button id="backButton" onclick="closeViewChaptersModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover mt-3">返回</button>
        </div>
    </div>
    <!-- 查看资源模态框 -->
    <div id="viewResourcesModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeViewResourcesModal()">&times;</span>
            <h2>课程资源</h2>
            <!-- 添加章节和文件类型选择框 -->
            <div class="flex flex-wrap gap-4 mb-4">
                <div>
                    <label for="chapterFilter" class="block mb-1">章节筛选：</label>
                    <select id="chapterFilter" class="border border-gray-300 rounded-md p-2">
                        <option value="all">全部章节</option>
                    </select>
                </div>
                <div>
                    <label for="fileTypeFilter" class="block mb-1">文件类型筛选：</label>
                    <select id="fileTypeFilter" class="border border-gray-300 rounded-md p-2">
                        <option value="all">全部</option>
                        <option value="pptx">pptx</option>
                        <option value="pdf">pdf</option>
                        <option value="xlsx">xlsx</option>
                        <option value="mp3">mp3</option>
                        <option value="docx">docx</option>
                        <option value="other">其它</option>
                    </select>
                </div>
            </div>
            <ul id="resourceList"></ul>
            <button onclick="closeViewResourcesModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover ml-2">返回</button>
        </div>
    </div>
    <!-- 上传资源模态框 -->
    <div id="uploadResourceModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeUploadResourceModal()">&times;</span>
            <h2>上传资源</h2>
            <form id="uploadResourceForm" enctype="multipart/form-data">
                <input type="hidden" id="uploadCourseCode" name="courseCode">
                <div class="form-group mb-3">
                    <label for="resourceFile" class="block mb-1">选择文件</label>
                    <input type="file" id="resourceFile" name="resource" class="border border-gray-300 rounded-md p-2">
                </div>
                <div class="form-group mb-3">
                    <label for="permission" class="block mb-1">查看权限（班级编号，多个用逗号隔开，输入 all 表示所有班级可查看）</label>
                    <input type="text" id="permission" name="permission" class="border border-gray-300 rounded-md p-2">
                </div>
                <div class="form-group mb-3">
                    <label for="attachment" class="block mb-1">资源依附</label>
                    <select id="attachment" name="attachment" class="border border-gray-300 rounded-md p-2"></select>
                </div>
                <div class="form-group mb-3">
                    <label for="belongChapter" class="block mb-1">资源所属章节</label>
                    <select id="belongChapter" name="belongChapter" class="border border-gray-300 rounded-md p-2"></select>
                </div>
                <button type="button" onclick="uploadResource()" class="px-4 py-2 bg-primary text-white rounded-md btn-hover">确定</button>
                <button type="button" onclick="closeUploadResourceModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover ml-2">取消</button>
            </form>
        </div>
    </div>
    <!-- 资源所有版本模态框 -->
    <div id="allVersionsModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeAllVersionsModal()">&times;</span>
            <h2>资源所有版本</h2>
            <div id="versionList"></div>
            <button onclick="closeAllVersionsModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover ml-2">返回</button>
        </div>
    </div>
    <!-- 课程预览模态框 -->
    <div id="coursePreviewModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeCoursePreviewModal()">&times;</span>
            <h2>课程预览</h2>
            <div id="coursePreviewInfo"></div>
            <button id="backButton" onclick="closeCoursePreviewModal()" class="px-4 py-2 bg-gray-300 text-dark rounded-md btn-hover mt-3">返回</button>
        </div>
    </div>
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">课程预览</h3>
                    <p class="text-gray-400">用户可以查看当前平台上的所有课程，方便教师进行课程管理，学生查看课程细节</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>
    <script type="module" src="js/view-course.js"></script>
</body>

</html>